<template>
  <div>
    <el-drawer v-if="compareConflictDrawerVisible"
               title="冲突试题对比"
               size="70%"
               :visible.sync="compareConflictDrawerVisible">
      <CompareConflict :conflictExerciseGroupArray="conflictExerciseGroupArray"/>
    </el-drawer>
    <el-row class="bottom-space" style="margin-top: 10px;">
      <el-col>
        <div style="width: 430px; float: right">
          <el-input v-model="exerciseGroup.caseAlias" placeholder="请输入试题相关材料" @keyup.enter.native="advanceConfirm">
            <i class="el-input__icon el-icon-search" slot="prefix"></i>
            <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
          </el-input>
        </div>
        <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
          <div class="block" style="margin-top: 10px">
            <div style="width: 100px;display: inline-block;text-align: right">试题类型</div>
            <div style="display: inline-block">
              <el-select clearable size="small"
                         placeholder="请选择"
                         v-model="exerciseGroup.role"
                         style="width: 300px;">
                <el-option
                  v-for="item in CONST.EXERCISE_GROUP_ROLE_ARRAY"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="margin-top: 60px; right: 10px;">
            <el-row>
              <el-col :offset="6" :span="6">
                <div style="margin-left: 90px;height: 32px; width: 88px;">
                  <el-button size="small" v-on:click="showAdvance = false">取 消</el-button>
                </div>
              </el-col>
              <el-col :offset="2" :span="2">
                <div style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small" v-on:click="reset">重置</el-button>
                </div>
              </el-col>
              <el-col :offset="2" :span="2">
                <div div style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-row>
      <el-table :data="tableData" border stripe :height="tableHeight" :span-method="merge">
        <el-table-column label="序号" width="50" prop="sortNo" align="center"></el-table-column>
        <el-table-column label="题型" width="100" prop="role"></el-table-column>
        <el-table-column label="题干" min-width="150" prop="caseAlias">
          <template slot-scope="scope">
            <div v-html="scope.row.caseAlias"/>
          </template>
        </el-table-column>
        <el-table-column label="来源" min-width="100" prop="bookName"></el-table-column>
        <el-table-column label="所属章节" min-width="150" prop="classify"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <span><el-link type="primary"
                           @click.prevent="previewExerciseGroup(scope.row)">查看</el-link></span>
            <span><el-link type="primary"
                           @click.prevent="editExerciseGroup(scope.row)">编辑</el-link></span>
            <span><el-link type="danger"
                           @click.prevent="deleteExerciseGroup(scope.row)">删除</el-link></span>
          </template>
        </el-table-column>
        <el-table-column label="对比" width="80">
          <template slot-scope="scope">
            <span><el-link type="primary"
                           @click.prevent="selectConflictExerciseGroupLibList(scope.row.conflictId)">对比</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size.sync="exerciseGroup.pageSize"
          :current-page.sync="exerciseGroup.currentPage"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="selectConflictExerciseGroupLibPage"
          @size-change="selectConflictExerciseGroupLibPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
  import CompareConflict from "./CompareConflict";
  export default {
    name: "ConflictExerciseGroupLibTable",
    components: {CompareConflict},
    data() {
      return {
        conflictExerciseGroupArray: [],
        compareConflictDrawerVisible: false,
        exerciseGroup: {
          caseAlias: '',
          currentPage: 1, // 第几页
          pageSize: 10, // 每页显示的数据个数
        },
        tableHeight: CONST.WORKSPACE_HEIGHT - 150,
        tableData: [],
        totalNum: 0,
        showAdvance: false,
        appendIcon: "el-icon-caret-bottom",
      }
    },
    methods: {
      setrowspans() {
        // 先给所有的数据都加一个v.rowspan = 1
        this.tableData.forEach(v => {
          v.rowspan = 1;
        });
        // 双层循环
        for (let i = 0; i < this.tableData.length; i++) {
          // 内层循环，上面已经给所有的行都加了v.rowspan = 1
          // 这里进行判断
          // 如果当前行的id和下一行的id相等
          // 就把当前v.rowspan + 1
          // 下一行的v.rowspan - 1
          for (let j = i + 1; j < this.tableData.length; j++) {
            //此处可根据相同字段进行合并，此处是根据的id
            if (this.tableData[i].conflictId === this.tableData[j].conflictId) {
              this.tableData[i].rowspan++;
              this.tableData[j].rowspan--;
            }
          }
          // 这里跳过已经重复的数据
          i = i + this.tableData[i].rowspan - 1;
        }
        let conflictIdSet = this.tableData.map(item => item.conflictId).distinct();
        this.tableData.forEach(item => item.sortNo = conflictIdSet.indexOf(item.conflictId) + 1)
      },
      merge({row, col, rowIndex, columnIndex}) {
        if (columnIndex === 0 || columnIndex === 6) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
        }
      },
      previewExerciseGroup(exerciseGroup) {
        this.axios.get('pmph/action/exerciseLib/selectExerciseEntryLibListByGroupLibId?exerciseGroupLibId=' + exerciseGroup.id)
          .then((response) => {
            exerciseGroup.exerciseEntryList = response.data
            this.$store.commit('showExerciseGroupDrawer', exerciseGroup)
          })
      },
      editExerciseGroup(exerciseGroup) {
        this.axios.get('pmph/action/exerciseLib/selectExerciseEntryLibListByGroupLibId?exerciseGroupLibId=' + exerciseGroup.id)
          .then((response) => {
            exerciseGroup.exerciseEntryList = response.data
            this.$store.commit('setExerciseGroup', exerciseGroup)
            this.$router.push('/exerciseLib/editExerciseGroup')
          })
      },
      deleteExerciseGroup(exerciseGroup) {
        this.$confirm('确认删除本题？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post('pmph/action/exerciseLib/deleteExerciseGroupLib', exerciseGroup)
            .then(this.selectConflictExerciseGroupLibPage)
        }, UTIL.emptyFun)
      },
      advanceConfirm: function () {
        this.exerciseGroup.currentPage = 1;
        this.selectConflictExerciseGroupLibPage();
      },
      switchAppend: function () {
        if (this.showAdvance) {
          this.showAdvance = false;
          this.appendIcon = "el-icon-caret-bottom";
        } else {
          this.showAdvance = true;
          this.appendIcon = "el-icon-caret-top";
        }
      },
      advanceCancel: function () {
        this.showAdvance = false;
      },
      reset: function () {
        this.exerciseGroup.caseAlias = ''
        this.exerciseGroup.role = ''
      },
      selectConflictExerciseGroupLibPage() {
        this.exerciseGroup.conflictFlag = true
        this.axios.get('/pmph/action/exerciseLib/selectExerciseGroupLibPage', {
          params: this.exerciseGroup
        }).then((response) => {
          this.tableData = response.data.records
          this.totalNum = response.data.total
          this.showAdvance = false
          this.setrowspans()
        })
      },
      selectConflictExerciseGroupLibList(conflictId) {
        this.axios.get('/pmph/action/exerciseLib/selectExerciseGroupLibList', {
          params: {
            conflictId,
          }
        }).then((response) => {
          this.conflictExerciseGroupArray = response.data
          this.compareConflictDrawerVisible = true
        })
      }
    },
    created() {
      this.exerciseGroup.exerciseBookId = this.$store.state.book.id
      this.selectConflictExerciseGroupLibPage();
    }
  }
</script>

<style scoped>

</style>
